<template>
  <div class="data-show-wrapper transition" :class="{'time-to-top': useStore.isSearchMode}">
    <TimeOfClock @click.stop="handleTimeClick" @contextmenu.stop.prevent="handleTimeRightClick" v-if="useStore.timeType === '钟表'"/>
    <div class="data-show transition" @click.stop="handleTimeClick" @contextmenu.stop.prevent="handleTimeRightClick" v-else>
      <span style="text-shadow: 2px 2px rgba(0, 0, 0, .2)">{{now}}</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import TimeOfClock from './TimeOfClock.vue'
import { useHomeStore } from "@/stores/home";
import { useMenuStore } from "@/stores/menu";
const useStore = useHomeStore();
const useMenu = useMenuStore();

let timer
const now = ref('')

const nowFormat = () => {
  let date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  now.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
}

onMounted(() => {
  nowFormat()
  timer = setInterval(nowFormat, 1000)
})
onBeforeUnmount(() =>{
  if (timer) {
    clearInterval(timer)
  }
})

/**
 * 点击「时间组件」事件
 *    1. 当「搜索框」处于「激活」状态时，
 *       点击「时间组件」切换到「捷径模式」，再次点击会回到已经激活的「搜索框」
 *    2. 当「搜索框」处于「未激活」状态时，
 *       点击「时间组件」切换到「捷径模式」，再次点击会回到未激活的「搜索框」
 *    3. 当「搜索框」处于「未激活」状态时，且「搜索框」有内容
 *       点击「时间组件」切换到「搜索框」，自动进入「搜索模式」
 */
function handleTimeClick(){
  if (!useStore.isSearchMode && useStore.isAppMode) {
    setTimeout(() => {
      useStore.isMask = false
      useStore.isAppMode = false
    }, 0)
  } else {
    useStore.isMask = true
    useStore.isAppMode = !useStore.isAppMode
    if (useMenu.searchContent !== '') {
      useStore.isSearchMode = true
    }
    // 逻辑移到 SearchBar.vue 组件完成
    // setTimeout(() => {
    //   if (!useStore.isAppMode) {
    //     document.querySelector('.search-input').focus()
    //   }
    // }, 0)
  }
}

/**
 处理时钟右键点击事件
 */
const handleTimeRightClick = () => {
  // console.log('右键点击了时钟')
}
</script>

<style lang="less">
.data-show-wrapper {
  position: relative;
  z-index: 10;
  padding-bottom: 1rem;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  .data-show {
    cursor: pointer;
    color: #fff;
    font-size: 28px;
    padding: 10px;

    &:hover {
      transform: scale(1.15);
    }
  }
}

@media screen and (max-width: 400px) {
  .time-to-top {
    height: 110px !important;
  }
}
</style>